<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>Ajax学习之旅</h1>
		1.高版本使用Ajax：
		var request = new XMLHttpRequest();
		<!--低版本IE var request = new XMLActiveXObject('Microsoft.XMLHTTP')-->
		request.onreadystatechange = function(){
			if(request.readyState == 4){//成功完成
				if(request.status === 2000){
					//TODO
				}else{
					//TODO
				}
			}ele{
				
			}
		}
		request.open('GET','api/categories');
		open 有三个参数，第一个参数为GET/POST，第二个UTRL，第三个指定是否使用异步，默认true；
		request.send();
		2.同源策略
		  解决同源策略的方法：
		  参考网址：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000#0
		  1.通过Flash插件发送HTTP请求（不推荐）
		  2.通过再同源域名下架设代理服务器，JavaScript负责把请求发送到代理服务器
		  3.JSONP，该方法只能用GET请求，并且要求返回JavaScript。该方式利用浏览器允许跨域引用JavaScript资源
		  4.CORS（Cross-Origin Resourcre Sharing） HTML5新的跨域策略
		3.Promise
		4.Canvans
		  Canvans 时H5新增的组件，他就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。
		  
		<canvas id="test" width="300" height="200"></canvas>
		<script>
			var canvas = document.getElementById("test");
			var ctx = canvas.getContext('2d');//获取一个CanvasRenderContext2D对象，所有绘图操作都需要通过这个对象完成。
			
//			if(canvas.getContext){
//				console.log('你的浏览器支持Canvas!');
//			}else{
//				console.log('你的浏览器不支持Canvas！');
//			}
            ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形，擦除的意思是把该区域变为透明
			ctx.fillStyle = '#dddddd'; // 设置颜色
			ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
			// 利用Path绘制复杂路径:
			var path=new Path2D();
			path.arc(75, 75, 50, 0, Math.PI*2, true);
			path.moveTo(110,75);
			path.arc(75, 75, 35, 0, Math.PI, false);
			path.moveTo(65, 65);
			path.arc(60, 65, 5, 0, Math.PI*2, true);
			path.moveTo(95, 65);
			path.arc(90, 65, 5, 0, Math.PI*2, true);
			ctx.strokeStyle = '#0000ff';
			ctx.stroke(path);
		</script>


	
	</body>
</html>
